<template>
    <div class="port-page">
        <!-- 顶部按钮 -->
        <!-- <el-button type="info" class="btn" :loading="searchLoading" @click="search" icon="search">搜索</el-button> -->
        <el-button type="success" class="btn" @click="dialog('add')" icon="edit">添加</el-button>
        <!-- <el-button type="danger" class="btn" :disabled="multipleDeleteDisabled" icon="delete">批量删除</el-button> -->

        <!-- 模糊搜索条件 -->
        <!-- <div class="search">

            <div class="search-item">
                <span>节假日名称：</span>
                <el-input placeholder="请输入节假日名称" class="code-search" v-model="name" icon="search"  @keyup.enter.native="search"></el-input>
            </div>

        </div> -->

        <!-- 数据表格展示区域 -->
        <el-table
            :data="dataList"
            border
            align="center"
            class="admin-table"
            @select="checkSelect"
            @select-all="checkall">

            <!-- <el-table-column type="selection" width="55"></el-table-column> -->


            <el-table-column
                :prop="v.prop"
                :label="v.label"
                v-for="(v,index) in portTitleList"
                align="center"
                show-overflow-tooltip
                v-if="v.hide != 0"
                :formatter="v.formatter"
                :align="v.align || 'center'"
                :fixed="v.fixed"
                :class-name="v.columnStyle"
                :width="v.width"
                :min-width="v.minWidth"
                :header-align="v.headerAlign || 'center'"
                >
                <template scope="scope">
                    <div slot="reference">
                        {{ scope.row[scope.column.property] }}
                    </div>
                 </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
                <template scope="scope">
                    <el-button size="small" type="text" v-for="v in portBntList" @click="dialog(v.type,scope.row)">{{v.name}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页查询区域 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>


        <!-- 各个组件显示区域 -->

        <!-- 添加组件 -->
        <el-dialog title="添加节假日" :visible.sync="addBol" size="tiny">
            <div class="item">
                <span>选择时间：</span>
                <el-date-picker v-model="addDate" type="date" placeholder="选择日期" class="select"></el-date-picker>
            </div>
            <div class="item">
                <span>节日描述：</span>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="节日描述"
                  v-model="addDesc">
                </el-input>
            </div>
            <el-button class="holidaysBtn" type="info" @click="addHolidays">提交</el-button>
        </el-dialog>

        <!-- 编辑组件 -->
        <el-dialog title="编辑节假日" :visible.sync="editBol" size="tiny">
            <div class="item">
                <span>选择时间：</span>
                <el-date-picker v-model="editDate" type="date" placeholder="选择日期" class="select"></el-date-picker>
            </div>
            <div class="item">
                <span>节日描述：</span>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="节日描述"
                  v-model="editDesc">
                </el-input>
            </div>

            <el-button class="holidaysBtn" type="info" @click="editHolidays">保存</el-button>
        </el-dialog>

        <!-- 动画加载 -->
        <LoadingComponent v-show="isLoading"></LoadingComponent>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        data () {
            return {
                addBol: false,
                addDate: '',
                addDesc: '',


                editBol: false,
                editID: '',
                editDate: '',
                editDesc: '',

                delID: '',
                /*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    edit: {
                        type: 'edit',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    }
                },

                multipleDelNum:'', //获取批量选择的数据
                dataList: [],  //表格数据

                /*
                    prop :  接口参数名
                    label : 接口中文名
                    hide : 是否隐藏这一列
                    align : 这一列对齐顺序 ： left,right,center
                    headerAlign : 这一列表头对齐方式 ： left,right,center
                */
                portTitleList: [
                    {
                        prop:'id',
                        label:'id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },{
                        prop:'rq',
                        label:'日期',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'200px',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    },{
                        prop:'sm',
                        label:'说明',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center',
                        formatter: function(row,column) {}
                    }
                ],
                portBntList: [//接口按钮列表
                    {
                        name:'编辑',
                        type:'edit'
                    },
                    {
                        name:'删除',
                        type:'del'
                    }
                ],

                /*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画

                /*模糊搜索条件*/
                inputjkname:'' , //  接口名称,


                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数


                dropDownData:'', //
            }
        },
        created () {

            //加载页面时调用
            this.$store.dispatch('changeTitle','节假日管理');//修改title
            this.$store.dispatch('changeRouterIndex','/admin/holidays');//修改路由

            this.search();//分页获取默认数据

            this.isLoading = true;//动画开始

        },
        mounted () {
            this.isLoading = false;//动画结束
        },
        methods: {

            search () {//
                this.searchLoading = true;
                this.axios.get(this.$store.state.api + 'jjr/list',{
                    params:{
                        pageindex: this.pageindex,
                        pagesize: this.pagesize
                    }
                }).then( res => {
                    console.log(res)

                    let data = res.data.data;
                    let list = data.list;
                    this.total = data.totalPage;
                    this.dataList = list;

                    this.searchLoading = false;
                }).catch( res => {
                    console.log(res)
                    this.searchLoading = false;
                })
            },

            addHolidays () {  //添加节假日
                if (!this.addDate) {
                    this.$message({
                        type:'warning',
                        message:'请选择时间'
                    })
                    return null;
                }
                if (!this.addDesc) {
                    this.$message({
                        type:'warning',
                        message:'请填写描述'
                    })
                    return null;
                }
                var time = this.$.getLocalTimeNo0(Date.parse(this.addDate));
                this.axios.get(this.$store.state.api + 'jjr/add', {
                    params: {
                        rq: time,
                        sm: this.addDesc
                    }
                }).then( res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        this.search();
                        this.addBol = false;
                    }
                }).catch( res => {
                    console.log(res)
                })
                // this.$.
            },
            editHolidays () { //修改节假日
               if (!this.editDate) {
                    this.$message({
                        type:'warning',
                        message:'请选择时间'
                    })
                    return null;
                }
                if (!this.editDesc) {
                    this.$message({
                        type:'warning',
                        message:'请填写描述'
                    })
                    return null;
                }
                var time = this.$.getLocalTimeNo0(Date.parse(this.editDate));
                this.axios.get(this.$store.state.api + 'jjr/update', {
                    params: {
                        id: this.editID,
                        rq: time,
                        sm: this.editDesc
                    }
                }).then( res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        this.search();
                        this.editBol = false;
                    }
                }).catch( res => {
                    console.log(res)
                })
            },

            delHilidays (id) { //删除节假日
                this.axios.get(this.$store.state.api + 'jjr/del', {
                    params: {
                        id: id
                    }
                }).then( res => {
                    console.log(res)
                    if (res.data.code == 1) {
                        this.search();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                }).catch( res => {
                    console.log(res)
                })
            },

            dialog (type, params) {
                if (type === 'add') {
                    this.addBol = true;

                }else if(type == 'edit') {
                    this.editBol = true;
                    this.editDate = params.rq;
                    this.editDesc = params.sm;
                    this.editID = params.id
                }else if(type == 'del') {
                    this.delID = params.id
                    this.$confirm('此操作将删除节假日, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.delHilidays (this.delID)

                    }).catch(() => {
                      this.$message({
                        type: 'info',
                        message: '已取消删除'
                      });
                    });

                }else {
                    console.log('NONONO')
                }
            },

            handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                console.log(selection, row)
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                // console.log(selection)
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                // console.log(strID.join(","))
                this.multipleDelNum = strID.join(",");
                // console.log(strID)
            },



        },
        computed: {
            multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .port-page {
        font-size:12px;

        .admin-table {
            margin-top:20px;
        }

        .btn {
            height: 30px;
            padding:0 10px;
        }
        .code-search {
            width: 200px;
            height: 30px;
            margin:10px 0 10px 0;
        }

        .change-time{
            width: 480px;
            display: inline-block;
        }

        .class-page {
            text-align: left;
            margin-top:10px;
        }

        .search-item {
            display: inline-block;
            margin-right:10px;
        }

        .box {
            overflow: auto;
        }

        .select {
            min-width: 254px;
        }

        .holidaysBtn {
            width: 120px;
            display: block;
            margin:0 auto;
            margin-top:20px;
        }

        .item:nth-child(2) {
            margin-top:20px;

            span {
                line-height: 30px;
            }
        }

    }
</style>
